import React, { PureComponent } from 'react'
import Table from '../base/base-table'
import Input from 'antd/lib/input'
import Icon from 'antd/lib/icon'
import { connect } from 'react-redux'

const columns = [
    {
        title: '序号',
        dataIndex: 'name',
        key: 'name',
        width: '10%',
        render: (value, row, index) => {
            return index + 1
        }
    }, {
        title: '任务令号',
        dataIndex: 'taskId',
        key: 'task_id',
        width: '10%',
    }, {
        title: '编码',
        dataIndex: 'encode',
        key: 'encode',
        width: '10%',
    },
    {
        title: '任务令数',
        dataIndex: 'all',
        key: 'all',
        width: '10%',
    },
    {
        title: '完工数量',
        dataIndex: 'completed',
        key: 'completed',
        width: '10%',
    }
]

class TallyingTable extends PureComponent {
    constructor () {
        super()
        this.state = {
            index: 0
        }
    }

    componentDidMount () {
        this.loop()
    }

    loop = () => {
        this.setState({
            index: 0
        })
        if (this.timer) {
            clearInterval(this.timer)
        }
        this.timer = setInterval(() => {
            if (this.state.index >= this.props.scheduling.size) {
                this.setState({
                    index: 0
                })
            } else {
                this.setState({
                    index: this.state.index + 1
                })
            }
        }, 3000)
    }

    componentWillUnmount () {
        clearInterval(this.timer)
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.scheduling !== this.props.scheduling) {
            this.setState({
                index: 0
            })
            this.loop()
        }
    }

    // shouldComponentUpdate (nextProps) {
    //
    // }

    render () {
        console.log(this.state.index)
        let data = this.props.scheduling.slice(this.state.index, this.state.index + 40)
        if (data.size < 40) {
            data = data.concat(this.props.scheduling.slice(0, Math.min(40 - this.state.index, this.state.index)))
        }
        return (
            <div className="scheduling-table-container">
                <div className="scheduling-table-head-container">
                    <div className="scheduling-table-head" style={{width: '15%'}}>序号</div>
                    <div className="scheduling-table-head" style={{width: '25%'}}>任务令号</div>
                    <div className="scheduling-table-head" style={{width: '25%'}}>编码</div>
                    <div className="scheduling-table-head" style={{width: '15%'}}>任务令数</div>
                    <div className="scheduling-table-head" style={{width: '15%'}}>完工数量</div>
                </div>
                <div>
                    {data.map((d, i) => {
                        return <div key={d.get('taskId')}>
                            <div className="scheduling-table-body" style={{width: '15%'}}>
                                {d.get('key')}
                            </div>
                            <div className="scheduling-table-body" style={{width: '25%'}}>
                                {d.get('taskId')}
                            </div>
                            <div className="scheduling-table-body" style={{width: '25%'}}>
                                {d.get('encode')}
                            </div>
                            <div className="scheduling-table-body" style={{width: '15%'}}>
                                {d.get('all')}
                            </div>
                            <div className="scheduling-table-body" style={{width: '15%'}}>
                                {d.get('completed')}
                            </div>
                        </div>
                    }).toJS()}
                </div>
                {/*<Table columns={columns} dataSource={this.props.scheduling.toJS()}/>*/}
            </div>
        )
    }

}
function mapStoreToProps ({scheduling}) {
    return {
        scheduling
    }
}

export default connect(mapStoreToProps)(TallyingTable)